<template>
  <div class="login">
    <el-card>
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="账号" prop="zhanghao">
          <el-input
            v-model="formData.zhanghao"
            placeholder="请输入账号"
            clearable
            class="zhanghao"
            prefix-icon="el-icon-user"
            :style="{ width: '90%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            clearable
            show-password
            prefix-icon="el-icon-lock"
            :style="{ width: '90%' }"
            oncopy="return false"
          ></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        zhanghao: "lbx123456",
        password: "Qaa12345",
      },
      rules: {
        zhanghao: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 8,
            max: 16,
            message: "长度在 1 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.elForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("users/login", {
          zhanghao: this.formData.zhanghao,
          password: this.formData.password,
        });
        //console.log(res);
        if (res.status !== 200) return this.$message.error("登陆失败");
        this.$message.success("成功");
        //console.log(res);
        window.sessionStorage.setItem("userToken", res.token);
        window.sessionStorage.setItem("userName", res.data.username);
        //window.sessionStorage.setItem('userAvatar',res.data.avatar)
        window.localStorage.setItem("userAvatar", res.data.avatar);
        window.sessionStorage.setItem("userId", res.data.id);
        window.sessionStorage.setItem("userState", res.data.state);
        this.$router.push("/Home");
        this.$store.state.userData.userName = res.data.username;
        this.$store.state.userData.userAvatar = res.data.avatar;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs.elForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 500px;
  position: fixed;
  margin: 250px 35%;
}
</style>
